<div *ngIf="_totalItemsCount > 0" class="sustainalytics-pagination">
    <div class="pagination-summary">
        <span>{{ _pageIndex * _pageSize > _totalItemsCount ? _totalItemsCount : _pageIndex * _pageSize }}</span>
        <span class="pagination-summary-separator">of</span>
        <span>{{ _totalItemsCount }}</span>
    </div>
    <div class="pagination-pages">
        <a href="javascript:;" *ngIf="visiblePagesFrom > 1" (click)="goTo(1);" class="pagination-page" [ngClass]="{ 'pagination-page-set-first': visiblePagesFrom <= 2 }">1</a>
        <a href="javascript:;" *ngIf="visiblePagesFrom > 2" (click)="prevSet();" class="pagination-prevSet">...</a>
        <a href="javascript:;" *ngFor="let page of visiblePagesArray;let first = first;let last = last;" class="pagination-page pagination-page-set" [ngClass]="{ 'pagination-page-active': page == _pageIndex, 'pagination-page-set-first': first && (visiblePagesFrom > 2 || visiblePagesFrom == 1), 'pagination-page-set-last': last && (visiblePagesTo < _totalPageCount - 1 || visiblePagesTo == _totalPageCount) }" (click)="goTo(page);">{{ page }}</a>
        <a href="javascript:;" *ngIf="visiblePagesTo < _totalPageCount - 1" (click)="nextSet();" class="pagination-nextSet">...</a>
        <a href="javascript:;" *ngIf="visiblePagesTo < _totalPageCount" (click)="goTo(_totalPageCount);" class="pagination-page" [ngClass]="{ 'pagination-page-set-last': visiblePagesTo >= _totalPageCount - 1 }">{{ _totalPageCount }}</a>
    </div>
    <div class="pagination-size">
        <span>Per page </span>
        <select class="select-box" id="pageSize" name="pageSize" [value]="_pageSize" (change)="pageSize = $event.target.value*1">
            <option value="20" selected="selected">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </div>
</div>